<template>
  <div class="bg-gray">
    <el-row :gutter="20" class="margin-bottom">
      <el-col :span="20">
        <div class="toll">
          <div class="toll-item first">
            <div class="first-title">昨日通行费量</div>
            <div class="item-sub">
              <div>
                <span class="toll-num">{{unitConvert(yesterInfo.fee)}}</span>
                <span class="toll-unit">(万元)</span>
              </div>
              <div class="first-subtitle">昨日通行费</div>
            </div>
            <div class="item-sub">
              <div>
                <span class="toll-num">{{unitConvert(yesterInfo.num)}}</span>
                <span class="toll-unit">(万辆)</span>
              </div>
              <div class="first-subtitle">昨日通行量</div>
            </div>
          </div>
          <div class="toll-item">
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{unitConvert(costInfo.xkf)}}</span>
                <span class="toll-unit">(万元)</span>
              </div>
              <div class="toll-tag blue">出口客车通行费</div>
            </div>
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{unitConvert(costInfo.xhf)}}</span>
                <span class="toll-unit">(万元)</span>
              </div>
              <div class="toll-tag blue">出口货车通行费</div>
            </div>
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{unitConvert(costInfo.xzf)}}</span>
                <span class="toll-unit">(万元)</span>
              </div>
              <div class="toll-tag blue">出口总通行费</div>
            </div>
          </div>
          <div class="toll-item">
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{unitConvert(costInfo.etcf)}}</span>
                <span class="toll-unit">(万元)</span>
              </div>
              <div class="toll-tag origin">ETC通行费</div>
            </div>
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{unitConvert(costInfo.fxf)}}</span>
                <span class="toll-unit">(万元)</span>
              </div>
              <div class="toll-tag origin">非现金通行费</div>
            </div>

          </div>
        </div>
        <div class="toll">
          <div class="toll-item">
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{costInfo.rkk}}</span>
                <span class="toll-unit">(辆)</span>
              </div>
              <div class="toll-tag green">入口客车辆</div>
            </div>
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{costInfo.rkh}}</span>
                <span class="toll-unit">(辆)</span>
              </div>
              <div class="toll-tag green">入口货车量</div>
            </div>
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{costInfo.rkz}}</span>
                <span class="toll-unit">(辆)</span>
              </div>
              <div class="toll-tag green">入口总辆</div>
            </div>
          </div>
          <div class="toll-item">
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{costInfo.ckk}}</span>
                <span class="toll-unit">(辆)</span>
              </div>
              <div class="toll-tag blue">出口客车量</div>
            </div>
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{costInfo.ckh}}</span>
                <span class="toll-unit">(辆)</span>
              </div>
              <div class="toll-tag blue">出口货车量</div>
            </div>
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{costInfo.ckz}}</span>
                <span class="toll-unit">(辆)</span>
              </div>
              <div class="toll-tag blue">出口总辆</div>
            </div>
          </div>
          <div class="toll-item">
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{costInfo.etcr}}</span>
                <span class="toll-unit">(辆)</span>
              </div>
              <div class="toll-tag origin">ETC入口辆</div>
            </div>
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{costInfo.etcc}}</span>
                <span class="toll-unit">(辆)</span>
              </div>
              <div class="toll-tag origin">ETC出口辆</div>
            </div>
            <div class="border-right item-sub">
              <div>
                <span class="toll-num">{{costInfo.fxl}}</span>
                <span class="toll-unit">(辆)</span>
              </div>
              <div class="toll-tag origin">非现金出口量</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="info">
          <div class="info-top">
            <div class="avatat"><img src="" alt=""></div>
            <div class="">
              <div class="name">{{userInfo.nickName}}</div>
              <div class="flex">
                <template v-for="(item,index) in userInfo.roles">
                  <div class="info-tag" v-if="index<3">
                    {{item.roleName}}
                  </div>
                </template>

                <!-- <div class="info-tag">
                  稽核员
                </div> -->
              </div>
            </div>
          </div>
          <div class="info-bottom">
            <div class="flex between">
              <div class="title margin-none">工作清单</div>
              <!-- <div class="more flex ">查看更多<el-icon>
                  <ArrowRight />
                </el-icon></div> -->
            </div>
            <div class="table scroll">
              <div class="tr " v-for="(dict,index) in work_list" :key="dict.value">
                <div class="index">{{index+1}}</div>
                <div class="flex between padding-left flex-sub">
                  <div>{{dict.label}}</div>
                  <div class="table-tag">{{dict.value}}</div>
                </div>
              </div>
            </div>

          </div>

        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="margin-bottom">
      <el-col :span="6">
        <div class="bg-white ">
          <div class="flex tab margin-bottom">
            <div class="tab-item " @click="bindChangeTo(1)" :class="toSelect==1?'active':''">待办</div>
            <div class="tab-item" @click="bindChangeTo(2)" :class="toSelect==2?'active':''">已办</div>
          </div>
          <div class="time-height">
            <el-timeline v-if="todoListData.length">
              <el-timeline-item v-for="(activity, index) in todoListData" :key="index" :timestamp="activity.timestamp">
                <div class="flex between">
                  <div class="flex">
                    {{ activity.procDefName }} <div class="time-tag">{{activity.duration}}</div>
                  </div>
                  <div class="handle"   @click="handleProcess(activity)">去处理</div>
                </div>

              </el-timeline-item>
            </el-timeline>
            <div class="" v-if="todoListData.length==0">
              <el-empty></el-empty>
            </div>
          </div>
        </div>

      </el-col>
      <el-col :span="14">
        <div style="height:39vh;display: flex;flex-direction: column;justify-content: space-between;">
          <div class="bg-white margin-bottom">
            <div class="title">通行费变化趋势</div>
            <BarEchert v-if="echartsBarData1.xaxis?.length" :echartsData="echartsBarData1" id="bar1" height="12.5vh" />
          </div>
          <div class="bg-white">
            <div class="title">通行量变化趋势</div>
            <BarEchert v-if="echartsBarData2.xaxis?.length" :echartsData="echartsBarData2" id="bar2"  height="12.5vh" />
          </div>
        </div>

      </el-col>
      <el-col :span="4">
        <div class="bg-white duty">
          <div class="flex between">
            <div class="title margin-none">今日值班</div>
            <div v-if="deptId==101">
              <el-tree-select style="width: 140px;" v-model="guardQuery.deptId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
              placeholder="请选择部门" check-strictly clearable @change="bindChangeTree" />
            </div>
           
          </div>
          
          <div class="table" style="height: 33vh;overflow-y: scroll;" >
            <div v-if="!guardList">
              <el-empty></el-empty>
            </div>
            <template v-if="guardList">
            <div class="tr">
              <div class="tr-name">值班站长</div>
              <div class="padding-left flex-sub tr-list">
                <div>{{guardList.leaderName}}</div>
              </div>
            </div>
            <div class="tr">
              <div class="tr-name">收费白班</div>
              <div class="padding-left flex-sub tr-list">
                <div>{{guardList.chargeWhiteList}}</div>
              </div>
            </div>
            <div class="tr">
              <div class="tr-name">治超白班</div>
              <div class="padding-left flex-sub tr-list">
                <div>{{guardList.excessWhiteList}}</div>
              </div>
            </div>
            <div class="tr">
              <div class="tr-name">治超夜班</div>
              <div class="padding-left flex-sub tr-list">
                <div>{{guardList.excessBlackList}}</div>
              </div>
            </div>

            <div class="tr">
              <div class="tr-name">票证稽校主办</div>
              <div class="padding-left flex-sub tr-list">
                <div>{{guardList.auditHostList}}</div>
              </div>
            </div>
            <div class="tr">
              <div class="tr-name">票证稽核协办</div>
              <div class="padding-left flex-sub tr-list">
                <div>{{guardList.auditJoinList}}</div>
              </div>
            </div>
            <div class="tr">
              <div class="tr-name">ETC发行</div>
              <div class="padding-left flex-sub tr-list">
                <div>{{guardList.etcPublicList||'暂无'}}</div>
              </div>
            </div>
            <div class="tr">
              <div class="tr-name">办公</div>
              <div class="padding-left flex-sub tr-list">
                <div>{{guardList.officeList}}</div>
              </div>
            </div>
            <div class="tr">
              <div class="tr-name">维修</div>
              <div class="padding-left flex-sub tr-list">
                <div>{{guardList.repairList}}</div>
              </div>
            </div>
            <div class="tr">
              <div class="tr-name">后勤</div>
              <div class="padding-left flex-sub tr-list">
                <div>{{guardList.logisticsList}}</div>
              </div>
            </div>
          </template>
          </div>
       
        </div>

      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12" v-if="deptId==101||roleId==18">
        <div class="bg-white">
          <div class="first-title">通行费量日均排行</div>
          <div class="empty-title"></div>
          <BarEchert v-if="echartsData3.xaxis?.length" :echartsData="echartsData3" id="bar5" height="18.5vh" />
        </div>
      </el-col>
      <el-col :span="4" v-if="deptId!=101">
        <div class="bg-white">
          <div class="first-title">站支付类型占比</div>
          <pieEchert :echartsData="rankData" v-if="rankData.length" id="pie1" height="20vh" :deptName="deptName" />
        </div>

      </el-col>
      <el-col :span="4" v-if="deptId!=101">
        <div class="bg-white">
          <div class="first-title green"></div>
          <pieEchert :echartsData="rankData2" id="pie2" height="20vh" :deptName="deptName" />
        </div>
      </el-col>
      <el-col :span="4" v-if="deptId!=101">
        <div class="bg-white">
          <div class="first-title origin"></div>
          <pieEchert :echartsData="rankData3" id="pie3" height="20vh" :deptName="deptName" />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg-white">

          <div class="flex between">
            <div class="title margin-none">近7天ETC使用趋势</div>
            <div class="etc-tab">
              <div @click="bindChanageTab(1)">入口使用率</div>
              <div @click="bindChanageTab(2)">出口使用率</div>
            </div>

          </div>
          <LineEchert v-if="echartsLineData.xaxis?.length" :echartsData="echartsLineData" id="line1" height="17.5vh" />
        </div>
      </el-col>
      <el-col :span="6">
        <!-- <div class="bg-white">
          <div class="title">今日开通车道</div>

        </div> -->

        <div class="lane-status bg-white">
          <div class="title">今日开通车道</div>
          <div style="height: 15.5vh;">

            <!-- 入口车道开通情况 -->
            <div class="status-section">
              <div class="section-title">入口车道开通情况</div>
              <div class="status-table">
                <div class="table-header">
                  <div class="header-cell">车道开通数</div>
                  <div class="header-cell">人工车道开通数</div>
                  <div class="header-cell">ETC车道开通数</div>
                </div>
                <div class="table-row">
                  <div class="table-cell">{{ lineInfo.cdsrk }}</div>
                  <div class="table-cell">{{ lineInfo.jrkfrgcdrk }}</div>
                  <div class="table-cell">{{ lineInfo.jrkfetccdrk }}</div>
                </div>
              </div>
            </div>

            <!-- 出口车道开通情况 -->
            <div class="status-section">
              <div class="section-title">出口车道开通情况</div>
              <div class="status-table">
                <div class="table-header">
                  <div class="header-cell">车道开通数</div>
                  <div class="header-cell">人工车道开通数</div>
                  <div class="header-cell">ETC车道开通数</div>
                </div>
                <div class="table-row">
                  <div class="table-cell">{{ lineInfo.cdsck }}</div>
                  <div class="table-cell">{{ lineInfo.jrkfrgcdck }}</div>
                  <div class="table-cell">{{ lineInfo.jrkfetccdck }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import moment from 'moment'
import { deptTreeSelect } from "@/api/system/user";
import { etcRatio, feeRanking, numRanking, payType, feeRate, numRate, avgPrice, vehicleRanking, dayRanking } from "@/api/charge/ticket";
import BarEchert from "./indexComponents/barEchert.vue";
import PieEchert from "./indexComponents/pieEchert.vue";
import LineEchert from "./indexComponents/lineEchert.vue";
import { finishedList } from "@/api/flowable/finished";
import { todoList } from "@/api/flowable/todo";
import { getYesterPassage, getYesterNum, getCostData, etcRatioTendency, passageTendency, getLaneInfo } from '@/api/charge/gate'
import { listGuard} from "@/api/coordination/guard";
import useUserStore from '@/store/modules/user'
import router from "@/router";

import { getCKInfo } from '@/utils/auth'
const { proxy } = getCurrentInstance();
const { work_list } = proxy.useDict("work_list");
const activities = ref([{ content: '机电设施日常巡查', timestamp: '2024/06/25 09:00' }, { content: '机电设施日常巡查', timestamp: '2024/06/25 09:00' }, { content: '机电设施日常巡查', timestamp: '2024/06/25 09:00' }])
const echartsData = ref({ xaxis: [], name: "通行费", series: [{ name: "通行费", data: [] }] })
const userStore = useUserStore()
const loading = ref(false)
const echartsLineData = ref({ xaxis: [], series: [{ data1: [], data2: [] }], type: 1 })
const echartsBarData1 = ref({ series: [{ data: [] }, { data: [] }] })
const echartsBarData2 = ref({ series: [{ data1: [] }] })
const echartsData3 = ref({rotate:45, xaxis: [], series: [{ name: "通行费", data: [] }, { name: '通行量', data: [] }] })
const rankData = ref([])
const rankData2 = ref([])
const rankData3 = ref([])
const deptOptions = ref([])
const deptName=ref('')
const echartsEmpty = ref([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
const roleId=ref()

const pieData = ref([
  {
    name: '现金',
    value: 20,
  },
  {
    name: '非现金',
    value: 20,
  },
  {
    name: 'ETC',
    value: 20,
  }
])
const deptId = ref(Number(getCKInfo('deptId')))
const guardQuery=ref({deptId:deptId.value==101?110:deptId.value})
const yesterInfo = ref({})
const costInfo = ref({})
const userInfo = ref({})
const todoListData = ref([])
const lineInfo = ref({})
const yesDate = ref(moment().subtract(1, 'day').format('YYYY-MM-DD'))
const toSelect = ref(1)
const guardList=ref([])
function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
};
const bindChangeTo = (val) => {
  toSelect.value = val;
  if (val == 1) {
    gettoDoList()//待办
  } else {
    gettoDoOverList()//已办
  }
}
/** 跳转到流程处理页面 */
function handleProcess(row) {
  router.push({
    path: '/flowable/task/todo/detail/index',
    query: {
      procInsId: row.procInsId,
      executionId: row.executionId,
      deployId: row.deployId,
      taskId: row.taskId,
      taskName: row.taskName,
      procDefName: row.procDefName,
      startUser: row.startUserName + '-' + row.startDeptName,
      currentKey: row.taskDefKey,
    }
  })
}
const bindChanageTab = (val) => {
  echartsLineData.value.type = val;
  getPassageTendencyYear()
}
// 昨日通行
const getYesterNumInit = () => {
  getYesterNum({ deptId: deptId.value, startDate: yesDate.value, endDate: yesDate.value }).then(res => {
    if (res.code == 200) {
      yesterInfo.value = res.data
    }
  })
}
const getYesterNumCost = () => {
  getCostData({ deptId: deptId.value, startDate: yesDate.value, endDate: yesDate.value }).then(res => {
    if (res.code == 200) {
      costInfo.value = res.data
    }
  })
}
const getYesterNumStateInit = () => {
  getYesterPassage({ deptId: deptId.value, startDate: yesDate.value, endDate: yesDate.value }).then(res => {
    if (res.code == 200) {
      yesterInfo.value = res.data
    }
  })
}
function getfeeRanking(obj) {
  let data = obj ? obj : { sort: 'totalFee' }
  echartsData.value.xaxis = []
  feeRanking(data).then(response => {
    if (response.code == 200 && response.data) {
      echartsData.value.xaxis = response.data.deptName;
      echartsData.value.series[0].data = response.data[data.sort] ? response.data[data.sort] : echartsEmpty


    }


  });
}

const getPassageTendencyYear = () => {
  echartsLineData.value.xaxis = []
  etcRatioTendency({ deptId: deptId.value }).then(response => {
    if (response.code == 200 && response.data) {
      echartsLineData.value.xaxis = response.data.date;
      echartsLineData.value.series[0].data1 = response.data.en
      echartsLineData.value.series[0].data2 = response.data.ex

    }
  })
}
const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      deptId.value = res.user.dept.deptId;
      userInfo.value = res.user
      roleId.value=res.user.roles[0].roleId

    }

  })
}
/** 查询流程定义列表 */
function gettoDoList() {
  loading.value = true;
  todoList({
    pageNum: 1,
    pageSize: 8
  }).then(response => {
    todoListData.value = response.data.records;
    // total.value = response.data.total;
    loading.value = false;
  });
}
/** 查询流程定义列表 */
function gettoDoOverList() {
  loading.value = true;
  finishedList({
    pageNum: 1,
    pageSize: 8
  }).then(response => {
    todoListData.value = response.data.records;
    // total.value = response.data.total;
    loading.value = false;
  });
}




// 通行费量增减趋势
const getTendencyNumInit = () => {
  passageTendency({ deptId: deptId.value }).then(res => {
    if (res.code == 200) {
      echartsBarData1.value.series[0].name = '通行费'
     let fee=[];
        let num=[];
      res.data.year.fee.forEach(item=>{
     
        fee.push(yuanToWan(item))
  
      })
      res.data.year.num.forEach(item=>{
          num.push(yuanToWan(item))
      })
      console.log(res.data.year.fee)
      echartsBarData1.value.series[0].data = fee
      echartsBarData2.value.series[0].data = num
      echartsBarData2.value.series[0].name = '通行量'
      echartsBarData2.value.xaxis = res.data.year.date
      echartsBarData1.value.xaxis = res.data.year.date
    }
  })
}
const getLine = () => {
  getLaneInfo({ id: deptId.value }).then(res => {
    if (res.code == 200) {
      lineInfo.value = res.data
    }
  })
}

function getRankPay(obj) {
  let data = obj ? obj : { deptId: deptId.value, startDate: yesDate.value, endDate: yesDate.value, ...{ sort: 'totalFee' } }
  // rankData.value.xaxis = []
  payType(data).then(response => {
    deptName.value=response.data.deptName[0]
    rankData.value = [
      {
        name: '现金',
        value: response.data.cashPay[0],
      },
      {
        name: '非现金',
        value: response.data.nonCashPay[0],
      },
      {
        name: 'ETC',
        value: response.data.etcPay[0],
      }
    ]


  });
}
function getfeeRate(obj) {
  let data = obj ? obj : { deptId: deptId.value, startDate: yesDate.value, endDate: yesDate.value, ...{ sort: 'totalFee' } }
  // rankData2.value.xaxis = []
  rankData2.value=[]
  feeRate(data).then(response => {
    deptName.value=response.data.deptName[0]
    rankData2.value = [
      {
        name: '客车',
        value: response.data.kFeeRate[0],
      },
      {
        name: '货车',
        value: response.data.hFeeRate[0],
      }

    ]


  });
}

function getnumRate(obj) {
  let data = obj ? obj : { deptId: deptId.value, startDate: yesDate.value, endDate: yesDate.value, ...{ sort: 'totalFee' } }
  // rankData3.value.xaxis = []
  numRate(data).then(response => {
    deptName.value=response.data.deptName[0]
    rankData3.value = [
      {
        name: '客车',
        value: response.data.hExRate[0],
      },
      {
        name: '货车',
        value: response.data.kExRate[0],
      }

    ]
  });
}

function getDayRanking(obj) {
  echartsData3.value.xaxis = []
  let data = obj ? obj : { deptId: deptId.value, startDate: yesDate.value, endDate: yesDate.value, ...{ sort: 'dayFee' } }
  dayRanking(data).then(response => {
    if (response.code == 200 && response.data) {
      echartsData3.value.xaxis = response.data.deptName;
      echartsData3.value.series[0].data = response.data.dayFee ? response.data.dayFee : echartsEmpty;
      echartsData3.value.series[1].data = response.data.dayEx ? response.data.dayEx : echartsEmpty;
    }
  });
}
function getDutyList() {
  listGuard({guardDate:moment().format('YYYY-MM-DD'),deptId:guardQuery.value.deptId}).then(response => {
    guardList.value = response.rows[0];

  });
}
const bindChangeTree = (val) => {
    // console.log(777,val)
  guardQuery.value.deptId = val;
  getDutyList();
}
function getInit() {
  getfeeRanking()
  if (deptId.value == 101) {
    getYesterNumInit()//昨日通行忻州公司
  } else {
    getYesterNumStateInit()//收费站
  }


  getYesterNumCost()//头部除了昨日通行
  getDeptId()
  getPassageTendencyYear()//近7天ETC使用趋势
  gettoDoList()//待办
  getTendencyNumInit()//通行费量增减趋势
  getLine()//今日开通车道
  getDutyList()//值班

  if (deptId.value != 101) {
    getRankPay() //
    getfeeRate()
    getnumRate()
  } else {
    getDayRanking()

  }

}
getInit()
getDeptTree()
function unitConvert(num) {
  var moneyUnits = ["元", "万元", "亿元", "万亿"]
  var dividend = 10000;
  var curentNum = num;
  //转换数字
  var curentUnit = moneyUnits[0];
  //转换单位
  curentUnit = moneyUnits[1]
  curentNum = curentNum / dividend
  var m = { num: 0, unit: "" }
  m.num = curentNum.toFixed(2)
  m.unit = curentUnit;


  return m.num && m.num != 'NaN' ? m.num : 0;
}

/**
 * 将元转换为万元
 * @param {number} yuan - 元数值
 * @param {number} decimals - 小数位数，默认为2
 * @returns {string} 转换后的万元数值字符串
 */
function yuanToWan(yuan, decimals = 2) {
  if (!yuan || isNaN(yuan)) {
    return '0.00';
  }
  
  const wan = yuan / 10000;
  return wan.toFixed(decimals);
}
</script>


<style scoped>
.time-height >>> .el-timeline {
  padding-left: 0 !important;
}
</style>
<style scoped  lang="scss">
.bg-gray {
  height: calc(100vh - 84px);
  background: #f4f8fb;
  padding: 24px 24px 0 24px;
  box-sizing: border-box;
}
.toll {
  width: 100%;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.toll .toll-item {
  display: flex;
  align-items: center;
  height: 11.5vh;
  position: relative;
}
.toll .first.toll-item {
  background: url(../assets/images/bg2.png) no-repeat 0 0;
  background-size: 100% 100%;
  color: #fff;
  border-left: none;
}
.toll .toll-item {
  flex: 1;
  text-align: center;
  border-left: 1px solid #e1e7ef;
}
.toll:nth-child(1) .toll-item:nth-child(2) {
  border-left: none;
}
.toll:nth-child(1) .toll-item {
  border-bottom: 1px solid #e1e7ef;
}
.toll .toll-item .item-sub {
  flex: 1;
  text-align: center;
  border-left: 1px solid #e1e7ef;
}
.toll .first.toll-item .item-sub:last-child {
  border-left: 1px solid #fff;
}
.toll .first.toll-item .item-sub:nth-child(2) {
  border: none !important;
}
.toll .toll-item .item-sub:nth-child(1) {
  border: none !important;
}
.first-title {
  width: 130px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../assets/images/icon72.png) no-repeat 0 0;
  background-size: 100% 100%;
  text-align: center;
  font-size: 14px;
  color: #fff;
}
.first-title.green {
  width: 150px;
  background: url(../assets/images/icon74.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.first-title.origin {
  width: 150px;
  background: url(../assets/images/icon73.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.toll .toll-unit {
  font-size: 12px;
}
.toll .toll-num {
  font-size: 30px;
}
.toll .toll-tag {
  display: inline-block;
  padding: 0 10px;
  border-radius: 22px;
  line-height: 22px;
  font-size: 12px;
  margin-top: 6px;

  background: #e8f2ff;
  color: #3b7ef7;
}
.toll .toll-tag.origin {
  background: #fff1e3;
  color: #f55733;
}
.toll .toll-tag.green {
  background: #ebfff3;
  color: #21b05a;
}

.flex {
  display: flex;
  align-items: center;
}
.between {
  justify-content: space-between;
}
.flex-sub {
  flex: 1;
}
.more {
  color: #3b7ef7;
}
.margin-bottom {
  margin-bottom: 10px;
}
.info {
  background: #fff;
  border-radius: 8px;
}
.info .info-top {
  padding: 16px 16px 10px 16px;
  border-bottom: 1px solid #e1e7ef;
  display: flex;
}
.info .info-top .name {
  margin-bottom: 8px;
  font-size: 16px;
  color: #333333;
}
.info .info-top .info-tag {
  line-height: 18px;
  font-size: 12px;
  background: #3b7ef7;
  border-radius: 4px;
  color: #fff;
  padding: 0 5px;
  margin-right: 5px;
}
.info .info-top .info-tag:nth-child(2) {
  background: #ffaa00;
}
.info .info-bottom {
  // height: 15.25rem;
  padding: 8px 16px 16px 16px;
}

.table {
  border: 1px solid #e1e7ef;
  border-radius: 4px;
  margin-top: 6px;
  font-size: 14px;
}
.table .tr {
  height: 2.5rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e1e7ef;
}
.table .tr:last-child {
  border-bottom: none;
}
.table .tr .index {
  line-height: 45px;
  width: 40px;
  text-align: center;
  border-right: 1px solid #e1e7ef;
}
.padding-left {
  padding-left: 10px;
}
.table-tag {
  width: 40px;
  line-height: 30px;
  background: #e8f2ff;
  border-radius: 103px;
  text-align: center;
  color: #3b7ef7;
  margin-right: 10px;
}
.table .tr-name {
  width: 100px;
  padding-left: 10px;
  background: #f8fcff;
  color: #999;
  line-height: 2.5rem;
}
.table .tr-list {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.tab {
  width: 138px;
  height: 30px;
  background: #e8f2ff;
  color: #3b7ef7;
  border-radius: 6px;
}
.tab .tab-item {
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.tab .tab-item.active {
  line-height: 30px;
  background: linear-gradient(137deg, #7eb2ff 0%, #2f7ef5 100%);
  border-radius: 4px;
  color: #fff;
}
.bg-white {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  position: relative;
}

.time-tag {
  line-height: 16px;
  font-size: 12px;
  padding: 0 10px;
  border-radius: 8px;
  color: #f55733;
  background: #ffe8e8;
}
.handle {
  width: 60px;
  line-height: 27px;
  background: linear-gradient(90deg, #4a82ff 0%, #8baeff 100%);
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.title {
  font-size: 18px;
  color: #333;
  padding-left: 10px;
  position: relative;
}
.title::before {
  content: "";
  display: block;
  width: 4px;
  height: 14px;
  border-radius: 19px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #3b7ef7;
}
.time-height {
  height: 33vh;
  overflow-y: scroll;
}

.duty {
  // height: 31.375rem;
}

.etc-tab {
  height: 30px;
  width: 11.25rem;
  display: flex;
  background: #e8f2ff;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.etc-tab > div {
  flex: 1;
  line-height: 30px;
  color: #3b7ef7;
  font-size: 12px;
  text-align: center;
}
.etc-tab > div:first-child {
  border-radius: 4px;
  background: linear-gradient(137deg, #7eb2ff 0%, #2f7ef5 100%);
  color: #fff;
}

.lane-status {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .title-mark {
    width: 4px;
    height: 16px;
    background: #409eff;
    border-radius: 2px;
    margin-right: 8px;
  }

  span {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
}

.status-section {
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }

  .section-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
    text-align: right;
  }
}

.status-table {
  background: #f8f9fb;
  border-radius: 4px;
  overflow: hidden;

  .table-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #f2f6fc;

    .header-cell {
      padding: 4px 12px;
      text-align: center;
      font-size: 14px;
      color: #606266;
      border-right: 1px solid #ebeef5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:last-child {
        border-right: none;
      }
    }
  }

  .table-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    .table-cell {
      padding: 4px 12px;
      text-align: center;
      font-size: 16px;
      color: #303133;
      font-weight: 500;
      border-right: 1px solid #ebeef5;

      &:last-child {
        border-right: none;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .status-table {
    .table-header .header-cell,
    .table-row .table-cell {
      font-size: 12px;
      padding: 8px;
    }
  }
}
.margin-none {
  margin: 0 !important;
}
.scroll {
  height: 11.2vh;
  overflow-y: scroll;
}
.empty-title{
  height: 1.25rem;
}
</style>
